<template>
  <div>
    <div v-if="system == 'B'" class="home">
      <div class="banner">
        <img
          src="@/assets/img/home/banner1.png"
          alt=""
          class="bg"
          ondragstart="return false"
        />
        <div class="intelligence">
          <h4>
            <p class="zh">技术分析</p>
            <p class="en">SCIENCE AND TECHNOLOGY ANALYSIS</p>
          </h4>
          <!-- <h5>全球能源行业大数据挖掘及科技情报分析系统</h5> -->
          <dl class="category">
            <dd
              v-for="(item, index) in categoryOptions"
              :key="index"
              @mouseover="handleMouseOver(index)"
              @mouseout="handleMouseOut"
              @click="handleChangePage(item)"
            >
              <div
                class="category-item"
                :class="{ gray: !item.router, def: item.router }"
              >
                <i class="bg iconfont icon-liubianxing"></i>
                <p class="label" v-html="item.label"></p>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="panel2">
        <!-- <img
          src="@/assets/img/home/banner1.png"
          alt=""
          class="bg"
          ondragstart="return false"
        /> -->
        <div class="container">
          <h4>
            <p class="zh">科技大数据中心</p>
            <p class="en">SCIENCE AND TECHNOLOGY CENTER FOR BIG DATA</p>
          </h4>
          <p class="abst">
            大数据中心拥有1299万+数据量，其中包括成果数据、标准数据等，能源数据企业画像、人才画像等，能源行业政策数据、资讯数据等海量数据。
          </p>
          <dl class="data-amount">
            <dd v-for="(item, index) in dataAmountData" :key="index">
              <div class="l">
                <img
                  v-if="index == 0"
                  src="../../../assets/img/home-c-fm.png"
                  alt=""
                />
                <img
                  v-if="index == 1"
                  src="../../../assets/img/home-c-bz.png"
                  alt=""
                />
                <img
                  v-if="index == 2"
                  src="../../../assets/img/home-cqy.png"
                  alt=""
                />
                <img
                  v-if="index == 4"
                  src="../../../assets/img/home-c-cy.png"
                  alt=""
                />
                <img
                  v-if="index == 3"
                  src="../../../assets/img/home-c-zj.png"
                  alt=""
                />
                <img
                  v-if="index == 5"
                  src="../../../assets/img/home-c-zx.png"
                  alt=""
                />
              </div>
              <div class="r">
                <h5>{{ item.name }}</h5>
                <p>
                  <span>{{ item.amount }}</span
                  ><i>{{ item.unit }}+</i>
                </p>
              </div>
            </dd>
          </dl>
        </div>
      </div>
      <!--  -->
      <div class="panel3" v-if="system == 'B'">
        <div class="container">
          <h4>
            <p class="zh">情报助手</p>
            <p class="en">INTELLIGENCE ASSISTANT</p>
          </h4>
          <dl class="effect">
            <dd
              v-for="(item, index) in effectOptions"
              :key="index"
              @click="toPage2(item)"
            >
              <div class="icon">
                <img :src="item.src" alt="" />
              </div>
              <p class="tit">{{ item.title }}</p>
            </dd>
          </dl>
        </div>
      </div>
      <!--  -->
      <div class="panel4">
        <div class="container">
          <div class="item-box">
            <h5>
              <img
                src="@/assets/img/home/news-logo.png"
                alt=""
                class="logo"
              /><span>相关网站</span>
            </h5>
            <dl>
              <dd v-for="(item, index) in outsideChain" :key="index">
                <p
                  v-for="(citem, index2) in item"
                  :key="index2"
                  @click="toLink(citem)"
                >
                  {{ citem.name }}
                </p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <footer>
        <div data-v-0215387d="" class="copyright">
          <div data-v-0215387d="">
            <span data-v-0215387d="" style="margin-right: 10px"
              >中译语通科技股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span
            ><span data-v-0215387d=""
              >Copyright © 2019-<a
                data-v-0215387d=""
                target="_blank"
                href="https://beian.miit.gov.cn/"
                style="color: rgb(255, 255, 255)"
                >京ICP备13002826号-19</a
              ></span
            ><span data-v-0215387d="" style="margin-left: 10px"
              ><a
                data-v-0215387d=""
                target="_blank"
                href="static/mock/JOVE.pdf"
                style="color: rgb(255, 255, 255)"
                >京ICP证140152号</a
              ></span
            >
          </div>
          <a
            data-v-0215387d=""
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010702001807"
            style="
              display: inline-block;
              text-decoration: none;
              height: 20px;
              line-height: 20px;
            "
          >
            <img
              data-v-0215387d=""
              src="../../../assets/img/home/beian.png"
              style="float: left; margin: 0 10px"
            /><span data-v-0215387d="" style="color: rgb(255, 255, 255)"
              >京公网安备 11010702001807号</span
            ></a
          >
        </div>
      </footer>
    </div>
    <div v-if="system == 'C'" class="home home-c">
      <div class="wrap-banner">
        <div class="banner-c">
          <div class="h4">
            <p class="zh">多维全景分析</p>
            <p class="en">MULTIDIMENSIONAL PANORAMIC ANALYSIS</p>
          </div>
          <div class="wrap-c">
            <!-- <div class="item">
              <div
                @click="handleChangePage({ router: 'DCMain', type: 'patent' })"
              >
                <img src="../../../assets/img/home-c-1.jpg" alt="" />
                <h4 class="f-title-6">专利库</h4>
              </div>
            </div> -->
            <div class="item">
              <div
                @click="
                  handleChangePage({ router: 'Analysis', type: 'patent' })
                "
              >
                <img src="../../../assets/img/home-c-2.jpg" alt="" />
                <h4 class="f-title-6">专利分析</h4>
              </div>
            </div>
            <!-- <div class="item">
              <div
                @click="handleChangePage({ router: 'DCMain', type: 'paper' })"
              >
                <img src="../../../assets/img/home-c-3.jpg" alt="" />
                <h4 class="f-title-6">论文库</h4>
              </div>
            </div> -->
            <div class="item">
              <div
                @click="handleChangePage({ router: 'Analysis', type: 'paper' })"
              >
                <img src="../../../assets/img/home-c-4.jpg" alt="" />
                <h4 class="f-title-6">论文分析</h4>
              </div>
            </div>
            <!-- <div class="item">
              <div
                @click="
                  handleChangePage({ router: 'technologyFrontier', type: '' })
                "
              >
                <img src="../../../assets/img/home-c-5.jpg" alt="" />
                <h4 class="f-title-6">技术前沿领域 <br />交叉分析</h4>
              </div>
            </div> -->
            <div class="item">
              <div
                @click="
                  handleChangePage({
                    router: 'technologyTopicTrends',
                    type: '',
                  })
                "
              >
                <img src="../../../assets/img/home-c-6.jpg" alt="" />
                <h4 class="f-title-6">热点前沿交叉分析</h4>
              </div>
            </div>
            <div class="item">
              <div
                @click="
                  handleChangePage({ router: 'technologyMaturity', type: '' })
                "
              >
                <img src="../../../assets/img/home-c-7.png" alt="" />
                <h4 class="f-title-6">技术成熟度分析</h4>
              </div>
            </div>
            <!-- <div class="item">
            <div>
              <img src="../../../assets/img/home-c-8.png" alt="">
              <h4 class="f-title-6">专利检索</h4>
            </div>
          </div> -->
          </div>
        </div>
      </div>
      <div class="panel2">
        <div class="container">
          <h4>
            <p class="zh">科技大数据中心</p>
            <p class="en">SCIENCE AND TECHNOLOGY CENTER FOR BIG DATA</p>
          </h4>
          <dl class="data-amount-r">
            <dd v-for="(item, index) in dataAmountData" :key="index">
              <div class="l">
                <img
                  v-if="index == 0"
                  src="../../../assets/img/home-c-zl.png"
                  alt=""
                />
                <img
                  v-if="index == 1"
                  src="../../../assets/img/home-c-lw.png"
                  alt=""
                />
                <img
                  v-if="index == 2"
                  src="../../../assets/img/home-c-fm.png"
                  alt=""
                />
                <img
                  v-if="index == 3"
                  src="../../../assets/img/home-c-bz.png"
                  alt=""
                />
                <img
                  v-if="index == 4"
                  src="../../../assets/img/home-cqy.png"
                  alt=""
                />
                <img
                  v-if="index == 6"
                  src="../../../assets/img/home-c-cy.png"
                  alt=""
                />
                <!-- <img
                  v-if="index == 5"
                  src="../../../assets/img/home-c-gs.png"
                  alt=""
                /> -->
                <img
                  v-if="index == 5"
                  src="../../../assets/img/home-c-zj.png"
                  alt=""
                />
                <!-- <img
                  v-if="index == 7"
                  src="../../../assets/img/home-c-cy.png"
                  alt=""
                /> -->
                <img
                  v-if="index == 7"
                  src="../../../assets/img/home-c-zx.png"
                  alt=""
                />
              </div>
              <div class="r">
                <h5>{{ item.name }}</h5>
                <p>
                  <span>{{ item.amount }}</span
                  ><i>{{ item.unit }}+</i>
                </p>
              </div>
            </dd>
          </dl>
          <p class="abst-r">
            大数据中心拥有4550万+数据量，其中包括基础知识库专利数据4290万+、论文数据260万+。
          </p>
        </div>
      </div>
      <!--  -->
      <div class="panel4">
        <div class="container">
          <h4 class="h4">
            <p class="zh">相关网站</p>
            <p class="en">Related Websites</p>
          </h4>
          <div class="item-box">
            <h5>
              <img
                src="@/assets/img/home/news-logo.png"
                alt=""
                class="logo"
              /><span>相关网站</span>
            </h5>
            <dl>
              <dd v-for="(item, index) in outsideChain" :key="index">
                <p
                  v-for="(citem, index2) in item"
                  :key="index2"
                  @click="toLink(citem)"
                >
                  {{ citem.name }}
                </p>
              </dd>
            </dl>
          </div>
        </div>
      </div>
      <footer>
        <div data-v-0215387d="" class="copyright">
          <div data-v-0215387d="">
            <span data-v-0215387d="" style="margin-right: 10px"
              >中译语通科技股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span
            ><span data-v-0215387d=""
              >Copyright © 2019-<a
                data-v-0215387d=""
                target="_blank"
                href="https://beian.miit.gov.cn/"
                style="color: rgb(255, 255, 255)"
                >京ICP备13002826号-19</a
              ></span
            ><span data-v-0215387d="" style="margin-left: 10px"
              ><a
                data-v-0215387d=""
                target="_blank"
                href="static/mock/JOVE.pdf"
                style="color: rgb(255, 255, 255)"
                >京ICP证140152号</a
              ></span
            >
          </div>
          <a
            data-v-0215387d=""
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010702001807"
            style="
              display: inline-block;
              text-decoration: none;
              height: 20px;
              line-height: 20px;
            "
          >
            <img
              data-v-0215387d=""
              src="../../../assets/img/home/beian.png"
              style="float: left; margin: 0 10px"
            /><span data-v-0215387d="" style="color: rgb(255, 255, 255)"
              >京公网安备 11010702001807号</span
            ></a
          >
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
// 优先加载图片数据
require("@/assets/img/home/category-01b.png");
require("@/assets/img/home/category-02b.png");
require("@/assets/img/home/category-03b.png");
require("@/assets/img/home/category-04b.png");
require("@/assets/img/home/category-05b.png");
require("@/assets/img/home/category-06b.png");
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      system: window.globalUrl.system || "B",
      keyword: "",
      searchType: 0,
      categoryActiveIndex: -1,
      categoryOptions: [],
      ipi: 1,
      ips: 30,
      alertsData: [],
      alertsClassOption: {
        hoverStop: true, // 禁用鼠标悬停停止
        // openWatch: true, //开启数据实时监控刷新dom
        isSingleRemUnit: true, // 是否开启 rem 度量
        singleHeight: 1.8, // 单步运动停止的高度
        switchDelay: 2000, // 单步切换的动画时间(ms)。
        waitTime: 4000, // 单步停止等待时间
        // delay: 3000
      },
      dataAmountData: [],
      effectOptions: [
        {
          title: "报告中心",
          router: "report",
          src: require("@/assets/img/home/baogao.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "工具助手",
          router: "",
          src: require("@/assets/img/home/gongju.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
        {
          title: "央企科技信息速览",
          router: "",
          url: "p/#/login",
          src: require("@/assets/img/home/fuwu.png"),
          explain:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. ",
        },
      ],
      newsData: [
        { title: "行业动态", data: [] },
        { title: "产业新政", data: [] },
      ],
      newsClassOption: {
        hoverStop: false, // 禁用鼠标悬停停止
        isSingleRemUnit: true, // 是否开启 rem 度量
        singleHeight: 0.6, // 单步运动停止的高度
        waitTime: 2000, // 单步停止等待时间
      },
      outsideChain: [
        [
          { name: "国家能源局", link: "http://www.nea.gov.cn/" },
          { name: "国际可再生能源机构", link: "https://www.irena.org/" },
          {
            name: "经合组织能源情报",
            link: "https://www.oecd-ilibrary.org/energy",
          },
        ],
        [
          {
            name: "欧盟能源发展",
            link: "https://ec.europa.eu/eurostat/web/energy",
          },
          { name: "美国能源部", link: "https://www.energy.gov" },
          { name: "法国电力", link: "https://www.edf.fr/" },
        ],
        [
          { name: "德国能源局", link: "https://www.dena.de/startseite/" },
          {
            name: "日本东京电力",
            link: "https://www.tepco.co.jp/index-j.html",
          },
          { name: "韩国能源研究所", link: "https://www.kier.re.kr/" },
        ],
        [{ name: "国际能源署", link: "https://www.iea.org/" }],
      ], // 外链
      // 意见反馈
      form: {
        contact: "", // 联系方式
        suggestions: "", // 建议
      },
      formRules: {
        contact: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        suggestions: [
          { required: true, message: "请输入建议或问题", trigger: "blur" },
        ],
      },
      errTip: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // this.dataAmountData = [
      //   { name: "专利数据", amount: "4290", unit: "万" },
      //   { name: "论文数据", amount: "260", unit: "万" },
      //   { name: "成果数据", amount: "18", unit: "万" },
      //   { name: "标准数据", amount: "21", unit: "万" },
      //   { name: "企业画像", amount: "275", unit: "万" },
      //   { name: "人才画像", amount: "955", unit: "万" },
      //   { name: "政策数据", amount: "2", unit: "万" },
      //   { name: "资讯数据", amount: "28", unit: "万" },
      // ];
      if (this.system == "B") {
        this.dataAmountData = [
          { name: "成果数据", amount: "18", unit: "万" },
          { name: "标准数据", amount: "21", unit: "万" },
          { name: "企业画像", amount: "275", unit: "万" },
          { name: "人才画像", amount: "955", unit: "万" },
          { name: "政策数据", amount: "2", unit: "万" },
          { name: "资讯数据", amount: "28", unit: "万" },
        ];
        this.categoryOptions = [
          {
            label: "成果库",
            icon: "icon-chanyefenxi",
            router: "DC",
            type: "achieve",
            // query: {
            // },
            style: { "font-size": ".4rem" },
          },
          {
            label: "标准库",
            icon: "icon-chanyefenxi",
            router: "DC",
            type: "standard",
            // query: {
            // },
            style: { "font-size": ".4rem" },
          },
          {
            label: "企业画像",
            icon: "icon-chanyefenxi",
            router: "EI",
            style: { "font-size": ".4rem" },
          },
          {
            label: "人才画像",
            icon: "icon-chanyefenxi",
            router: "PD",
            style: { "font-size": ".4rem" },
          },
          {
            label: "产业技术链",
            icon: "icon-chanyefenxi",
            router: "IndustrialChain",
            style: { "font-size": ".4rem" },
          },
          {
            label: "行业动态",
            icon: "icon-chanyefenxi",
            router: "Consult",
            style: { "font-size": ".4rem" },
          },
        ];
      } else if (this.system == "C") {
        this.dataAmountData = [
          { name: "专利数据", amount: "4290", unit: "万" },
          { name: "论文数据", amount: "260", unit: "万" },
        ];
        this.categoryOptions = [
          {
            label: "专利分析",
            icon: "icon-chanyefenxi",
            router: "Analysis",
            type: "patent",
            style: { "font-size": ".4rem" },
          },
          {
            label: "论文分析",
            icon: "icon-chanyefenxi",
            router: "Analysis",
            type: "paper",
            style: { "font-size": ".4rem" },
          },
          {
            label: "技术主题<br>趋势分析",
            icon: "icon-chanyefenxi",
            router: "technologyTopicTrends",
            style: { "font-size": ".4rem" },
          },
          {
            label: "技术领域<br>交叉分析",
            icon: "icon-chanyefenxi",
            router: "technologyFrontier",
            style: { "font-size": ".4rem" },
          },
          {
            label: "技术成熟<br>度分析",
            icon: "icon-chanyefenxi",
            router: "technologyMaturity",
            style: { "font-size": ".4rem" },
          },
        ];
      }
    },
    getData(type, func) {
      this.$get(this.$Url.IR.homeQueryPage, {
        ipi: this.ipi,
        ips: this.ips,
        type,
      })
        .then((res) => {
          let result = res.data && res.data.result;
          let newData = [];
          result.forEach((v) => {
            let time = v.pubdate;
            let date = "";
            if (time && time !== "") {
              date = `${moment(time).month() + 1}/${moment(time).date()}`;
            }
            newData.push({
              date,
              title: v.title,
              title2: v.title.replace(/<em>|<\/em>/g, ""),
              url: v.url,
            });
          });
          func && func(newData);
        })
        .catch((err) => {});
    },
    toPage(item) {
      window.open(item.url, "_blank");
    },
    // 情报助手跳转
    toPage2(item) {
      if (
        !this.$cookie.get("realName") ||
        this.$cookie.get("realName") === ""
      ) {
        this.$Bus.$emit("showLoginDialog", true);
        return;
      }
      if (item.url) {
        window.open(`${window.globalUrl.url}${item.url}`, "_blank");
        return;
      }
      if (item.router !== "") {
        let url = this.$router.resolve({
          name: item.router,
        });
        window.open(url.href, "_blank");
      } else {
        this.$alert("此功能暂未开放", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {},
        });
      }
    },
    handleMouseOver(index) {
      this.categoryActiveIndex = index;
    },
    handleMouseOut() {
      this.categoryActiveIndex = -1;
    },
    toLink(item) {
      window.open(item.link, "_blank");
    },
    // 页面跳转
    handleChangePage(item) {
      this.$router.push({
        name: item.router,
        query: {
          type: item.type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  .banner {
    position: relative;
    width: 100%;
    .bg {
      display: block;
      width: 100%;
    }
    .banner-title {
      position: absolute;
      top: 1.88rem;
      left: 0;
      // align-items: center;
      // justify-content: center;
      width: 100%;
      text-align: center;
      img {
        display: inline-block;
        height: 0.85rem;
        margin-bottom: 0.25rem;
      }
      .tip {
        font-size: 0.3rem;
        letter-spacing: 0.06rem;
        text-indent: 0.06rem;
        color: $color107;
      }
    }
    .search-bar {
      position: absolute;
      top: 5.41rem;
      left: 50%;
      margin-left: -4.785rem;
      .search-inp {
        width: 8.05rem;
        height: 0.6rem;
        margin-right: 0.2rem;
        vertical-align: middle;
        ::v-deep {
          ::placeholder {
            color: rgba(254, 254, 254, 0.5) !important;
            // color: red !important;
          }
          .el-input__inner {
            // height: .5rem;
            height: initial;
            line-height: 0.6rem;
            border-right: 0;
            border-color: $color21;
            border-top-left-radius: 6px;
            border-top-right-radius: 0;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 0;
            // font-family: SourceHanSansCN-Regular;
            font-size: 0.2rem;
            color: $color20;
            background-color: transparent;
          }
          .el-input-group__append {
            width: 0.6rem;
            padding-right: 0.25rem;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            box-sizing: border-box;
            text-align: center;
            background-color: transparent;
            .search-btn {
              display: block;
              width: 100%;
              text-align: center;
              font-size: 0.24rem;
              color: $color2;
            }
          }
        }
      }
      .search-btn2 {
        width: 1.3rem;
        height: 0.62rem;
        padding: 0;
        // padding-left: .21rem;
        border-color: $mainColor;
        border-radius: 6px;
        box-sizing: border-box;
        // font-family: SourceHanSansCN-Regular;
        font-size: 0.22rem;
        letter-spacing: 1px;
        color: $color17;
        vertical-align: middle;
        background-color: $mainColor;
        &:hover {
          background-color: $mainColor;
        }
      }
      .search-type {
        line-height: 0.48rem;
        padding-left: 0.1rem;
        margin-bottom: 0.14rem;
        font-size: 0.22rem;
        color: $color20;
        span {
          display: inline-block;
          margin-right: 0.24rem;
          cursor: pointer;
          &.active {
            // font-size: .26rem;
            color: $mainColor;
          }
        }
      }
      .tip {
        line-height: 0.3rem;
        font-size: 0.14rem;
        color: $color81;
      }
    }
    .intelligence {
      position: absolute;
      top: 0.91rem;
      left: 50%;
      width: 14rem;
      margin-left: -7rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 1rem;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.56rem;
          // font-weight: bold;
          text-transform: uppercase;
          color: rgba(73, 66, 89, 0.5);
        }
      }
      h5 {
        margin-bottom: 0.44rem;
        font-size: 0.2rem;
        font-weight: bold;
        text-align: center;
        letter-spacing: 1px;
        color: $color93;
      }
      .category {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        dd {
          position: relative;
          width: calc(100% / 6);
          height: 1.4rem;
          // width: 1.18rem;
          // height: 1.36rem;
          &:nth-of-type(3) {
            .category-item {
              .logo {
                left: -0.01rem;
              }
            }
          }
          &:hover {
            .category-item {
              &.def {
                cursor: pointer;
                .bg {
                  font-weight: bold;
                  transform: scale(1.1);
                  opacity: 1;
                }
                .logo {
                  .iconfont {
                    color: $color2;
                  }
                }
                .label {
                  transform: scale(1.1);
                  // bottom: .2rem;
                  // font-size: .2rem;
                  font-weight: bold;
                  color: $color40;
                }
              }
            }
          }
          .category-item {
            // position: absolute;
            // top: 0;
            // left: 0;
            width: 100%;
            height: 1.4rem;
            display: flex;
            align-items: center;
            &.gray {
              .bg {
                color: $color6;
              }
              .logo {
                .iconfont {
                  color: $color6;
                }
              }
              .label {
                color: $color6;
              }
            }
            .bg {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              line-height: 1.5rem;
              text-align: center;
              font-size: 1.6rem;
              color: $color2;
              opacity: 0.32;
              &:before {
                width: 100%;
              }
            }
            .logo {
              position: absolute;
              top: 0;
              left: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 80%;
              .iconfont {
                display: inline-block;
                background-image: linear-gradient(
                  180deg,
                  $mainColor,
                  $color106
                );
                background-clip: text;
                color: transparent;
              }
            }
            .label {
              // position: absolute;
              // bottom: 0.24rem;
              // left: 0;
              width: 100%;
              line-height: 0.3rem;
              font-size: 0.2rem;
              text-align: center;
              color: $color27;
            }
          }
        }
      }
    }
  }
  .panel1 {
    position: absolute;
    top: 11.38rem;
    left: 0;
    width: 100%;
    .container {
      position: relative;
      width: 14rem;
      padding: 0 0.56rem;
      margin: 0 auto;
      box-sizing: border-box;
      .alerts {
        position: relative;
        height: 2.52rem;
        padding: 0.36rem 0 0.28rem;
        border: 1px solid $color95;
        box-sizing: border-box;
        h4 {
          position: absolute;
          top: 50%;
          left: -0.17rem;
          width: 0.34rem;
          padding: 0.18rem 0;
          margin-top: -0.98rem;
          font-size: 0.3rem;
          color: $color2;
          background-color: $color94;
        }
        .wrap {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .item {
            position: relative;
            width: 100%;
            ul {
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-wrap: wrap;
              width: 100%;
              &:before {
                position: absolute;
                top: 10%;
                left: 50%;
                width: 1px;
                height: 80%;
                content: "";
                background-color: $color97;
              }
              li {
                position: relative;
                width: 50%;
                height: 0.6rem;
                padding: 0 0.5rem;
                box-sizing: border-box;
                font-size: 0.18rem;
                color: $color96;
                &:hover {
                  .date,
                  .title {
                    color: $mainColor;
                  }
                }
                div {
                  display: flex;
                  border-bottom: 1px solid rgba(221, 221, 226, 0.2);
                  .title {
                    width: calc(100% - 0.6rem);
                    line-height: 0.6rem;
                    padding-left: 0;
                    border-bottom: 0;
                    // font-family: SourceHanSansCN-Regular;
                    font-weight: normal;
                    // color: $color29;
                    color: $color2;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .date {
                    width: 0.6rem;
                    line-height: 0.6rem;
                    font-size: 0.16rem;
                    // color: $color100;
                    color: $color2;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .panel2 {
    position: relative;
    background-color: #191f4b;
    // .bg {
    // display: block;
    width: 100%;
    height: 6rem;
    // }
    .container {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 6rem;
      padding: 0 2.8rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.3rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 152, 0.4);
        }
      }
      .abst {
        position: absolute;
        top: 2rem;
        left: 16.1%;
        width: 17%;
        line-height: 0.38rem;
        // font-family: SourceHanSansCN-Light;
        font-size: 0.2rem;
        letter-spacing: 1px;
        color: $color31;
        &:before {
          position: absolute;
          bottom: -0.1rem;
          right: 0.1rem;
          width: 0.34rem;
          height: 0.05rem;
          content: "";
          background-color: $mainColor;
        }
      }
      .data-amount {
        position: absolute;
        top: 2rem;
        left: 36.4%;
        display: flex;
        flex-wrap: wrap;
        width: 52%;
        dd {
          width: 33.3333%;
          margin-bottom: 6.8%;
          display: flex;
          .l {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
              width: 50px;
            }
          }
          .r {
            width: 50%;
            h5 {
              line-height: 0.3341rem;
              padding-left: 17%;
              // font-family: SourceHanSansCN-Light;
              font-size: 0.18rem;
              color: $color109;
            }
            p {
              line-height: 0.3341rem;
              padding-left: 17%;
              color: $mainColor;
              span {
                display: inline-block;
                font-size: 0.38rem;
                vertical-align: middle;
              }
              i {
                display: inline-block;
                font-size: 0.23rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
  .panel3 {
    position: relative;
    background-color: $color110;
    .container {
      position: relative;
      width: 100%;
      padding: 0 2.8rem 0.46rem;
      box-sizing: border-box;
      h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.5rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(73, 66, 89, 0.4);
        }
      }
      .effect {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-bottom: 0.52rem;
        dd {
          width: calc((100% - 0.4rem) / 3);
          height: 1.46rem;
          margin-right: 0.2rem;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
          background-color: rgba(255, 255, 255, 0.1);
          transition: all 0.3s ease;
          cursor: pointer;
          &:last-of-type {
            margin-right: 0;
          }
          &:hover {
            border-radius: 4px;
            // box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.5);
            // background-color: rgba(255,255,255,.5);
            background-color: rgba(255, 255, 255, 0.2);
            .tit {
              // color: $mainColor;
            }
          }
          .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 0.68rem;
            height: 0.68rem;
            margin: 0.18rem auto 0.05rem;
            background-color: $mainColor;
            img {
              width: 48%;
            }
          }
          .tit {
            line-height: 0.48rem;
            text-align: center;
            // font-family: SourceHanSansCN-Medium;
            font-size: 0.2rem;
            transition: all 0.3s ease;
            color: $color107;
          }
          .explain {
            line-height: 0.2rem;
            padding: 0 0.2rem;
            font-size: 0.16rem;
            color: $color35;
          }
        }
      }
      .news {
        position: relative;
        display: flex;
        width: 100%;
        padding: 0.35rem 0.3rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-sizing: border-box;
        .news-item {
          position: relative;
          // flex: 1;
          width: 50%;
          // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          &:nth-of-type(1) {
            padding-right: 0.19rem;
            border-right: 1px solid $color36;
          }
          &:nth-of-type(2) {
            padding-left: 0.19rem;
          }
          h5 {
            position: relative;
            margin-bottom: 0.18rem;
            // font-family: SourceHanSansCN-Medium;
            font-weight: normal;
            text-align: left;
            .logo {
              position: absolute;
              top: -0.08rem;
              left: 0;
              width: 0.45rem;
              height: 0.48rem;
            }
            span {
              display: inline-block;
              line-height: 0.42rem;
              padding-left: 0.46rem;
              // font-style: italic;
              font-size: 0.26rem;
              text-shadow: -2px 3px 3px rgba(80, 97, 203, 0.47);
              color: #929fff;
            }
          }
          .more {
            position: absolute;
            top: 0;
            right: 0.19rem;
            line-height: 0.42rem;
            font-size: 0.16rem;
            // color: $color99;
            color: $color39;
          }
          .wrap {
            width: 100%;
            height: calc(0.6rem * 6);
            overflow: hidden;
            ul {
              position: relative;
              li {
                display: flex;
                align-items: center;
                width: 100%;
                height: 0.6rem;
                border-bottom: 1px solid $color112;
                font-size: 0.18rem;
                &:hover {
                  .date,
                  .title {
                    color: $mainColor;
                  }
                }
                .title {
                  width: calc(100% - 1rem);
                  line-height: 0.42rem;
                  border-bottom: 0;
                  // font-family: SourceHanSansCN-Regular;
                  font-weight: normal;
                  color: $color111;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                .date {
                  width: 1rem;
                  line-height: 0.42rem;
                  color: $color111;
                }
              }
            }
          }
        }
      }
    }
  }
  .panel4 {
    position: relative;
    background-color: $color110;
    .container {
      position: relative;
      width: 100%;
      padding: 0rem 2.8rem 1.46rem;
      box-sizing: border-box;

      .h4 {
        position: relative;
        width: 100%;
        height: 0.56rem;
        margin-bottom: 0.6rem;
        text-align: center;
        p {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          // font-family: SourceHanSansCN-Bold;
          font-weight: normal;
          text-align: center;
        }
        .zh {
          z-index: 2;
          line-height: 0.57rem;
          margin-top: 0.22rem;
          font-size: 0.3rem;
          color: $color107;
        }
        .en {
          z-index: 1;
          line-height: 0.56rem;
          font-size: 0.53rem;
          text-transform: uppercase;
          color: rgba(146, 143, 154, 0.4);
        }
      }

      .item-box {
        // background-color: rgba(255, 255, 255, 0.1);
        h5 {
          position: relative;
          margin-bottom: 0.18rem;
          // font-family: SourceHanSansCN-Medium;
          font-weight: normal;
          text-align: left;
          .logo {
            position: absolute;
            top: -0.08rem;
            left: 0;
            width: 0.45rem;
            height: 0.48rem;
          }
          span {
            display: inline-block;
            line-height: 0.42rem;
            padding-left: 0.46rem;
            // font-style: italic;
            font-size: 0.26rem;
            text-shadow: -2px 3px 3px rgba(80, 97, 203, 0.47);
            color: #a2adff;
          }
        }
        dl {
          position: relative;
          display: flex;
          padding-bottom: 0.2rem;
          dd {
            position: relative;
            width: calc(100% / 3);
            padding-left: 0.3rem;
            // border-right: 1px solid $color30;
            &:after {
              position: absolute;
              top: 0;
              right: 0;
              width: 1px;
              height: 100%;
              content: "";
              background-color: $color30;
            }
            &:nth-of-type(4n) {
              &:after {
                display: none;
              }
            }
            p {
              line-height: 0.4rem;
              padding-left: 0.2rem;
              // border-right: 1px solid $color30;
              font-size: 0.18rem;
              color: $color111;
              &:hover {
                text-decoration: underline;
                // color: $mainColor;
                color: $mainColor;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
  footer {
    position: relative;
    .container {
      position: relative;
      display: flex;
      padding: 0.6rem 2.8rem 0.4rem;
      .c-item {
        &:nth-of-type(1) {
          width: 55%;
          padding-right: 0.35rem;
        }
        &:nth-of-type(2) {
          width: 45%;
          padding-left: 0.35rem;
        }
        h5 {
          line-height: 0.42rem;
          margin-bottom: 0.1rem;
          // font-family: SourceHanSansCN-Medium;
          font-weight: bold;
          font-size: 0.2rem;
          color: $color114;
        }
        .introduce {
          line-height: 0.3rem;
          // font-family: SourceHanSansCN-Light;
          margin-bottom: 0.2rem;
          font-size: 0.16rem;
          text-indent: 2em;
          text-align: left;
          color: $color114;
        }
        .link {
          line-height: 0.24rem;
          font-size: 0.16rem;
          color: $color114;
        }
        .elform {
          ::v-deep {
            .el-form-item__content {
              margin-left: 0 !important;
            }
          }
        }
        .feedback-inp,
        .feedback-inp2 {
          width: 100%;
          height: 0.32rem;
          ::v-deep {
            ::placeholder {
              color: $color114 !important;
              // color: red !important;
            }
            .el-input__inner {
              height: 0.32rem;
              line-height: 0.32rem;
              border-color: rgba(176, 174, 180, 0.5);
              // font-family: SourceHanSansCN-Regular;
              font-size: 0.16rem;
              color: $color114;
              background-color: $color115;
            }
            .el-textarea__inner {
              border-color: rgba(176, 174, 180, 0.5);
              // font-family: SourceHanSansCN-Regular;
              font-size: 0.16rem;
              color: $color114;
              background-color: $color115;
            }
          }
        }
        .feedback-inp2 {
          height: initial;
        }
        .search-btn {
          width: 1rem;
        }
      }
    }
    .copyright {
      width: 100%;
      line-height: 0.63rem;
      border-top: 1px solid $color44;
      font-weight: bold;
      font-size: 14px;
      text-align: center;
      color: #fff;
      background-color: #140f1f;
      div {
        display: inline-block;
      }
      span {
        display: inline-block;
        &:nth-of-type(1) {
          margin-right: 20px;
        }
      }
    }
  }
}
.home-c {
  background: url("../../../assets/img/home-c-bg.jpg") 100% 100%;
  .wrap-banner {
    background: rgba($color: #000000, $alpha: 0.8);
    width: 100%;
  }
  .banner-c {
    padding: 30px;
    width: 14rem;
    padding-right: 0;
    padding-left: 0;
    margin: 0 auto;
    position: relative;
    padding: 1rem 0 2rem;

    .h4 {
      position: relative;
      width: 100%;
      height: 0.56rem;
      margin-bottom: 0.6rem;
      text-align: center;
      p {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        // font-family: SourceHanSansCN-Bold;
        font-weight: normal;
        text-align: center;
      }
      .zh {
        z-index: 2;
        line-height: 0.57rem;
        margin-top: 0.22rem;
        font-size: 0.3rem;
        color: $color107;
      }
      .en {
        z-index: 1;
        line-height: 0.56rem;
        font-size: 0.53rem;
        text-transform: uppercase;
        color: rgba(146, 143, 154, 0.4);
      }
    }
    .wrap-c {
      display: grid;
      margin-right: 0;
      margin-left: 0;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 32px;
      grid-row-gap: 32px;
    }
    .item {
      width: auto;
      min-width: auto;
      display: flex;
      cursor: pointer;
      div {
        display: block;
        position: relative;
        width: 100%;
        min-height: 2.4rem;
        padding: 21px 24px;
        border-radius: 8px;
        background: #000;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
        border: 1px solid #646464;
        h4 {
          position: absolute;
          top: 0px;
          right: 0;
          left: 0;
          z-index: 1;
          font-size: 0.28rem;
          padding-left: 10px;
          background: rgba($color: #000000, $alpha: 0.4);
        }
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transition: opacity 0.8s ease 0.3s;
          z-index: 0;
          object-fit: cover;
          object-position: center center;
          opacity: 0.9;
        }
      }
    }
  }
  .panel2 {
    background: rgba($color: #000000, $alpha: 0.8);
    height: 4rem;
    padding-top: 10px;
    .container {
      .abst-r {
        position: absolute;
        top: 2rem;
        right: 16.1%;
        width: 17%;
        line-height: 0.38rem;
        // font-family: SourceHanSansCN-Light;
        font-size: 0.2rem;
        letter-spacing: 1px;
        color: $color31;
        &:before {
          position: absolute;
          bottom: -0.1rem;
          right: 0.1rem;
          width: 0.34rem;
          height: 0.05rem;
          content: "";
          background-color: $mainColor;
        }
      }
      .data-amount-r {
        position: absolute;
        top: 2rem;
        right: 36.4%;
        display: flex;
        flex-wrap: wrap;
        width: 52%;
        dd {
          width: 33.3333%;
          margin-bottom: 6.8%;
          display: flex;
          .l {
            width: 50%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            img {
              width: 50px;
            }
          }
          .r {
            width: 50%;
            h5 {
              line-height: 0.3341rem;
              padding-left: 17%;
              // font-family: SourceHanSansCN-Light;
              font-size: 0.18rem;
              color: $color109;
            }
            p {
              line-height: 0.3341rem;
              padding-left: 17%;
              color: $mainColor;
              span {
                display: inline-block;
                font-size: 0.38rem;
                vertical-align: middle;
              }
              i {
                display: inline-block;
                font-size: 0.23rem;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
  .panel4 {
    background: rgba($color: #000000, $alpha: 0.8);
    padding-top: 1rem;
  }
}
</style>
